<template>
    <el-dialog v-model="props.isShow" :title="props.isAdd ? '添加菜单' : '编辑菜单'" center :before-close="closeX" @open="open(formRef)">
        <el-form :model="form" :rules="rules" label-width="7.5rem" class="demo-ruleForm" status-icon ref="formRef">

            <el-form-item label="菜单名称" prop="title">
                <el-input v-model="form.title" />
            </el-form-item>

            <el-form-item label="上级目录" prop="pid">
                <el-select v-model="form.pid" placeholder="请选择上级目录" @change="changePid">
                    <el-option label="顶级目录" :value="0" />
                    <el-option v-for="item in store.getters['menu/getMenu']" :label="item.title" :value="item.id"
                        :key="item.id" />
                </el-select>
            </el-form-item>

            <el-form-item label="菜单类型">
                <el-radio-group v-model="form.type" disabled>
                    <el-radio :label="1">目录</el-radio>
                    <el-radio :label="2">菜单</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="菜单图标" v-if="form.type == 1">
                <el-select v-model="form.icon" placeholder="请选择菜单图标" >
                    <el-option v-for="item in icon" :label="item" :value="item" :key="item" >
                        <el-icon><component :is="item"></component></el-icon>
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="菜单地址" v-else>
                <el-select v-model="form.url" placeholder="请选择菜单地址" >
                    <el-option v-for="item in IndexRoutes" :label="item.name" :value="item.path"
                        :key="item.path" />
                </el-select>
            </el-form-item>



            <el-form-item label="状态">
                <el-switch v-model="form.status" :active-value="1" :inactive-value="2" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submit(formRef)">确定</el-button>
                <el-button @click="close">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive, defineProps, defineEmits, defineExpose } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { menuadd, menuedit, menuinfo } from "../../request/api"
import {IndexRoutes} from "@/router"
let router = useRouter()
const getMenu = () => {
    store.dispatch('menu/getMenuAction')
};



let store = useStore()
// 接收父传子的接收
let props = defineProps({
    isAdd: Boolean,
    isShow: Boolean
})
// 获取ref
let formRef = ref<FormInstance>()
let form = ref({
    pid: 0, // 上级分类编号  注意：顶级菜单-0number
    title: "", //菜单名称string
    icon: "", //图标string
    type: 1, //类型 1目录2菜单number
    url: "", //菜单地址string
    status: 1, //状态   1正常2禁用   number类型number
    id: 0
})

let icon = [
    "Delete",
    "House",
    "HomeFilled",
    "Tools",
    "Menu",
    "Avatar"
]

//调用子传父的事件触发
let emit = defineEmits(["close"])

const closeX = (done: any) => {
    done()
    close()
}
let open = (formEl?: FormInstance | undefined)=>{
    if (!formEl) return
     //清空表单
     form.value = {
        pid: 0, // 上级分类编号  注意：顶级菜单-0number
        title: "", //菜单名称string
        icon: "", //图标string
        type: 1, //类型 1目录2菜单number
        url: "", //菜单地址string
        status: 2, //状态   1正常2禁用   number类型number
        id: 0
    }
    //清空表单验证
    formEl.resetFields();
}
// 点击取消事件
let close = () => {
    //让父元素操作显示隐藏
    emit("close", false)
}


//点击确定事件
const submit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((val) => {
        if (val) {
            if (props.isAdd) {
                console.log(form);
                menuadd(form.value).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        getMenu()
                        close()
                        ElMessage({
                            message: res.msg,
                            type: 'success',
                        })
                    } else {
                        ElMessage({
                            message: res.msg,
                            type: 'warning',
                        })

                    }
                })

            } else {
                menuedit(form.value).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        getMenu()
                        close()
                        ElMessage({
                            message: res.msg,
                            type: 'success',
                        })
                    } else {
                        ElMessage({
                            message: res.msg,
                            type: 'warning',
                        })

                    }
                })
            }
        }
    })
}

//切换下拉框事件
const changePid = () => {
    form.value.type = form.value.pid == 0 ? 1 : 2
}


//定义 rules规则
let rules = reactive<FormRules>({
    title: [
        { required: true, message: "请输入菜单名称", trigger: "blur" },
        { min: 2, max: 6, message: "Length should be 2 to 6", trigger: "blur" },
    ],
    pid: [
        {
            required: true,
            message: "请选择上级菜单",
            trigger: "change",
        },
    ],
});

//数据回显
let lookup = (id: number) => {
    menuinfo({ id }).then((res:any) => {
        console.log(res);
        if (res.code == 200) {
            form.value = res.list
            form.value.id = id
        }


    })


}

defineExpose({
    lookup
})



</script>